<template>
	<div>
		<van-nav-bar title="地址管理" left-arrow @click-left="$router.back()">
			<template #right>
				<van-icon name="ellipsis" size="18" />
			</template>
		</van-nav-bar>
		<van-address-list
			v-model="chosenAddressId"
			:list="list"
			default-tag-text="默认"
			@add="onAdd"
			@edit="onEdit"
		/>
	</div>
</template>

<script>
import { Dialog } from "vant";
export default {
	data() {
		return {
			chosenAddressId: "1",
			list: [],
		};
	},
	created() {
		this.$axios.get("/address").then((data) => {
			this.list = data.data.map((item) => {
				return {
					address:
						item.provinceName +
						item.cityName +
						item.regionName +
						item.detailAddress,
					id: item.addressId,
					isDefault: item.defaultFlag,
					name: item.userName,
					tel: item.userPhone,
				};
			});
			console.log(this.list);
			if (data.data.length == 0) {
				Dialog.confirm({
					message: "请添加地址",
					theme: "round-button",
				}).then(() => {
					this.onAdd();
				});
				return;
			}
		});
	},
	//取消下面的导航栏
	mounted() {
		this.$parent.showTabbar = false;
	},
	destroyed() {
		this.$parent.showTabbar = true;
	},

	methods: {
		onAdd() {
			this.$router.push("/edita");
		},
		// item: 地址对象，index: 索引
		onEdit(item) {
			// console.log(item, index);
			this.$router.push(`/edita?type=edit&addressId=${item.id}`);
		},
	},
};
</script>

<style lang="scss">
.van-button--danger {
	color: #fff;
	background-color: #1baeae !important;
	border: 1px solid #1baeae !important;
}
.van-tag--danger {
	background-color: #1baeae !important;
}
.van-address-item .van-radio__icon--checked .van-icon {
	background-color: #1baeae !important;
	border-color: #1baeae !important;
}
</style>
